<template>
  <div class="setting-page">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    
    <van-cell-group inset class="cell-group">
      <van-cell title="个人信息" is-link @click="goToPage('profile')" />
      <van-cell title="账号安全" is-link @click="goToPage('security')" />
      <van-cell title="通知设置" is-link @click="goToPage('notification')" />
    </van-cell-group>

    <van-cell-group inset class="cell-group">
      <van-cell title="分类管理" is-link @click="goToPage('/category_setting')" />
    </van-cell-group>
    
    <van-cell-group inset class="cell-group">
      <van-cell title="隐私政策" is-link @click="goToPage('privacy')" />
      <van-cell title="用户协议" is-link @click="goToPage('agreement')" />
      <van-cell title="关于我们" is-link @click="goToPage('about')" />
    </van-cell-group>
    
    <van-cell-group inset class="cell-group">
      <van-cell title="清除缓存" @click="clearCache">
        <template #right-icon>
          <van-loading v-if="loading" size="18" />
          <span v-else class="cache-size">{{ cacheSize }}</span>
        </template>
      </van-cell>
    </van-cell-group>
    
    <div class="logout-btn">
      <van-button round block type="danger" @click="logout">退出登录</van-button>
    </div>
    
    <div class="version-info">
      当前版本：v1.0.0
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()
const loading = ref(false)
const cacheSize = ref('12.5MB')

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 跳转到对应页面
const goToPage = (page) => {
  // 这里可以根据实际路由配置进行跳转
  router.push(page)
}

// 清除缓存
const clearCache = () => {
  loading.value = true
  
  // 模拟清除缓存的过程
  setTimeout(() => {
    loading.value = false
    cacheSize.value = '0KB'
    showToast('缓存已清除')
  }, 1000)
}

// 退出登录
const logout = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    showCancelButton: true,
  }).then(() => {
    // 确认退出
    localStorage.removeItem('token')
    showToast('已退出登录')
    router.push('/')
  }).catch(() => {
    // 取消退出
  })
}
</script>

<style scoped>
.setting-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

.cell-group {
  margin-top: 12px;
}

.cache-size {
  font-size: 14px;
  color: #999;
}

.logout-btn {
  margin: 20px 16px;
}

.version-info {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 20px;
}
</style>